@mixin flex($item: center) {
  //防止页面
  display: flex;
  justify-content: $item;
}

@mixin flexs($item: row) {
  display: flex;
  flex-direction: $item;
}

.bsteps {
  @include flexs;
  position: relative;
  margin: 24rpx;

  &_column {
    flex-direction: column
  }

  &_row {
    flex-direction: row;
    flex: 1;
    justify-content: center;
  }

  .stepsItem {
    text-align: center;
    display: inline-flex;
    position: relative;

    &_content {
      padding: 0 10rpx;
      font-weight: bold;

      &_indexs {
        margin: 0 auto;
        width: 50rpx;
        height: 50rpx;
        line-height: 50rpx;
        background: #eeeeee;
        color: #999999;
        //  background: linear-gradient(180deg, #2A69F3 0%, #72A7FF 100%);
        border-radius: 37px 37px 37px 37px;
        opacity: 1;
        text-align: center;
      }

      &_title {
        margin-top: 16rpx;
        color: #333;
        font-size: 28rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }


    }

    &_active {
      color: #fff;


      .stepsItem_content_indexs {
        color: #fff;
        background: linear-gradient(180deg, #2A69F3 0%, #72A7FF 100%);
      }
    }

  }

  .item-line {
    //  width:111;
  }
}